DoTouchAI/apps/web/src/app/[locale]/pricing/page.tsx

/**
 * 定价页 - 面包屑 + 页头 + 汇率提示 + 4 行完整价格表 + 扣费规则 + 定价 FAQ + 模型大全入口
 */
import { Suspense } from 'react';
import Link from 'next/link';
import { useLocale, useTranslations } from 'next-intl';
import { SiteHeader } from '@/components/SiteHeader';
import { SiteFooter } from '@/components/SiteFooter';
import { SupportFab } from '@/components/SupportFab';
import { AuthModal } from '@/components/AuthModal';
import { RateBox } from '@/components/pricing/RateBox';
import { PriceTable } from '@/components/pricing/PriceTable';
import { BillingRules } from '@/components/pricing/BillingRules';
import { PricingFaq } from '@/components/pricing/PricingFaq';


export default function PricingPage() {
  const t = useTranslations();
  const locale = useLocale();
  // BreadcrumbList 结构化数据
  const breadcrumbJson = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'Home', item: `${siteUrl()}/${locale}` },
      { '@type': 'ListItem', position: 2, name: 'Pricing', item: `${siteUrl()}/${locale}/pricing` },
    ],
  };


  return (
    <div className="flex min-h-screen flex-col">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJson) }}
      />
      <SiteHeader />
      <main className="flex-1">
        <div className="mx-auto max-w-[1160px] px-6 py-8">
          {/* 面包屑 */}
          <nav className="mb-6 flex items-center gap-2 text-[13px] text-brand-muted" aria-label="Breadcrumb">
            <Link href={`/${locale}`} className="transition-colors hover:text-brand-purple-l">
              {t('crumb_home')}
            </Link>
            <span className="opacity-50">/</span>
            <span className="text-brand-text">{t('nav_pricing')}</span>
          </nav>

          {/* 页头 */}
          <div className="mb-6 max-w-[720px]">
            <h1 className="mb-2 text-[30px] font-extrabold tracking-tight">{t('price_h1')}</h1>
            <p className="text-sm text-brand-muted">{t('price_sub')}</p>
          </div>

          {/* 汇率提示 */}
          <div className="max-w-[820px]">
            <RateBox />
          </div>

          {/* 完整价格表 */}
          <section className="mt-8">
            <PriceTable />
            <p className="mt-2.5 text-[12.5px] text-brand-muted">{t('price_note')}</p>
            <div className="mt-3.5 flex flex-wrap items-center gap-5">
              <Link
                href={`/${locale}/pricing/catalog`}
                className="inline-block text-sm font-semibold text-brand-purple-l transition-colors hover:text-brand-text"
              >
                📚 View all 236 models &amp; pricing → (Model Catalog)
              </Link>
              <Link
                href={`/${locale}/models`}
                className="inline-block text-sm font-semibold text-brand-purple-l transition-colors hover:text-brand-text"
              >
                {t('detail_rel_view')}
              </Link>
            </div>
          </section>

          {/* 扣费规则 */}
          <section className="mt-10">
            <BillingRules />
          </section>

          {/* 定价 FAQ */}
          <div className="mt-10">
            <PricingFaq />
          </div>
        </div>
      </main>
      <SiteFooter />
      <SupportFab />
      <Suspense fallback={null}>
        <AuthModal />
      </Suspense>
    </div>
  );
}

import type { Metadata } from 'next';
import { alternatesFor, pageMeta, siteUrl } from '@/lib/seo';

type MetaProps = { params: Promise<{ locale: string }> };

export async function generateMetadata({ params }: MetaProps): Promise<Metadata> {
  const { locale } = await params;
  const m = pageMeta(locale, 'pricing');
  return { title: m.title, description: m.desc, alternates: alternatesFor('/pricing', locale) };
}